import React from 'react';
import { IParamModelLiteData } from '@manycore/pages-vm-api';
import { IFieldChange } from '../input';
import Tooltip from 'antd/es/tooltip';
import 'antd/es/tooltip/style/css';
import SelectComponent from 'antd/es/select';
import 'antd/es/select/style/css';

export interface ISelectProps extends IFieldChange {
  field: IParamModelLiteData;
}

export function Select(props: ISelectProps) {
  const { field, onChange } = props;

  let defaultComponent = (
    <SelectComponent
      size="small"
      placeholder="请选择"
      defaultValue={field.value}
      style={{ width: '104px' }}
      onChange={(value, option) => {
        onChange && onChange(value as number);
      }}
    >
      {field.optionValues!.map((value, index) => {
        return (
          <SelectComponent.Option key={index} value={value.value}>
            {value.name}
          </SelectComponent.Option>
        );
      })}
    </SelectComponent>
  );

  if (typeof field.value !== 'undefined') {
    const currentField = field.optionValues!.find((i) => i.value === field.value);
    if (currentField) {
      defaultComponent = (
        <Tooltip title={currentField.name} trigger="hover" placement="top">
          {defaultComponent}
        </Tooltip>
      );
    }
  }

  return defaultComponent;
}
